<template>
  <view class="upload-video">
    <u-popup
			v-model="show"
			mode="center"
      :closeable="false"
      close-icon-color="#888"
			border-radius="16"
			@close="close"
			z-index="99"
			width="500">
      <view class="upload-video-container">
        <view class="upload-video-content">
          <view class="templat-image">
            <view class="title">GIF表情</view>
            <image
              :src="itemData.url"
              mode="scaleToFill"
              class="git-image"
            />
          </view>
          <view class="upload-video">
            <view class="title">对应视频</view>
            <UploadVideo
              v-if="itemData.url"
							ref="uUploadVidew"
							:action="uploadParams.action"
							:header="{
								'Authorization': 'Bearer ' + token // token
							}"
							height="200"
							upload-text="上传有声视频mp4"
							:limitType="uploadParams.limitType"
							:source-type="['album']"
							:max-count="uploadParams.maxCount"
							:type="uploadParams.uploadType"
							del-bg-color="#56d39d"
							:auto-upload="true"
							:file-list="uploadParams.fileList"
							@on-remove="removeImage"
							@on-uploaded="uploadSuccess"></UploadVideo>
          </view>
        </view>
        <!-- 按钮 -->
        <view class="btn-container">
          <u-button class="btn" plain hover-class="none" @click="show = false">取消</u-button>
          <u-button
            class="btn"
            type="primary"
            hover-class="none"
            :custom-style="{
              backgroundColor: '#56d39d'
            }"
            @click="confirm">确认</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import config from '@/utils/config';
  import { mapGetters } from 'vuex';
  import UploadVideo from '@/components/upload/uploadVideo';
  export default {
    components: {
      UploadVideo,
    },
    props: {
      popupShow: {
				type: Boolean,
				default: false,
			},
      info: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        show: this.popupShow,
        itemData: {
          index: '', // 索引
          url: '', // 表情包路径
          video_url: '', // 视频连接
        },
        uploadParams: {
          limitType: ['mp4', 'MP4'],
          maxCount: 1,
          uploadType: 'video',
          action: `${config.baseApi}/client/upload/uploadImg`,
          fileList: [],
        },
      }
    },
    watch: {
      popupShow: {
				immediate: true,
				handler(val, oldValue) {
					this.show = val;
				}
			},
      info: {
				immediate: true,
        deep: true,
				handler(val, oldValue) {
          console.log(val);
					if (val) {
						this.itemData.index = val.index;
						this.itemData.url = val.url;
					}
				}
			}
    },
    computed: {
			...mapGetters([
				'token',
			])
		},
    methods: {
      close() {
        this.itemData.url = '';
        this.itemData.index = null;
        this.itemData.video_url = '';
        this.$emit('close', false);
      },

      confirm() {
        let data = JSON.stringify(this.itemData);
        this.$emit('success', JSON.parse(data));
        this.show = false;
      },

      // 删除图片
      removeImage() {
        this.itemData.video_url = '';
      },

      // 上传成功
      uploadSuccess(data) {
        let src = '';
        data.forEach(item => {
          src = item.response.data.cover_path
          return;
        })
        this.itemData.video_url = src;
        uni.showToast({
          title: '上传成功',
          icon: 'success',
          mask: false,
          direction: 1000
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .upload-video-container{
    padding: 32rpx;

    .upload-video-content{
      display: flex;
      border-radius: 16rpx;
      align-items: center;
      justify-content: space-between;

      .git-image{
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx;
        border: 2rpx solid #eaeaea;
      }

      .title{
        text-align: center;
        padding: 24rpx 0;
      }
    }

    .btn-container{
			display: flex;
			padding-top: 32rpx;
			justify-content: space-between;

			.btn{
				flex: 1;
			}
			.btn:nth-child(1){
				margin-right: 24rpx;
			}
		}
  }
</style>
